<template>

  <el-drawer
    :title="defaultValue.title"
    :visible.sync="drawerConfig.show"
    @close="drawerConfig.show = false"
    :show-close="drawerConfig.showClose"
    :destroy-on-close="drawerConfig.destroyOnClose"
    :append-to-body="drawerConfig.appendToBody"
    :size="drawerConfig.size"
    >


    <el-tabs v-model="elTab.activeName" type="card" @tab-click="handleTabClick" style="min-height: 600px; max-height: 600px; margin: 10px">
      <el-tab-pane label="基础信息" name="home">
        <el-descriptions class="margin-top" title=""  :column="2" :size="size" :contentStyle="CS" :label-style="LS" border>

          <el-descriptions-item label="组件版本">
            <el-tag type="success" size="mini" >v. {{obj.version}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="版本类型">
            <el-tag type="danger" size="mini" v-if="obj.type === 1">主版本</el-tag>
            <el-tag size="mini" v-else-if="obj.type === 2">普通版本</el-tag>
            <el-tag type="info" size="mini" v-else-if="obj.type === 3">禁用版本</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="下载地址">
            <el-link type="primary" :href="obj.downUrl" target="_blank">{{obj.downUrl}}</el-link>
          </el-descriptions-item>
          <el-descriptions-item label="数据创建时间">{{obj.createTime}}</el-descriptions-item>

        </el-descriptions>

        <el-descriptions class="margin-top" title=""  :column="1" :size="size" :contentStyle="CS" :label-style="LS" border>
          <el-descriptions-item label="类型说明">{{obj.reason}}</el-descriptions-item>
          <el-descriptions-item label="组件介绍">{{obj.briefIntroduction}}</el-descriptions-item>
          <el-descriptions-item label="备注">{{obj.description}}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>


      <el-tab-pane label="安装" name="install">
        <div style="min-height: 500px; max-height: 700px; overflow-y: auto; margin-bottom: 20px">
          <el-divider content-position="left"><span style="color: coral">组件安装</span></el-divider>
          <!--md预览展示-->
          <mavon-editor v-model="obj.installDoc" style="font-size: 14px" :subfield="false" :defaultOpen="'preview'" :editable="false" :toolbarsFlag="false" />
        </div>
      </el-tab-pane>

      <el-tab-pane label="启动" name="start">
        <div style="min-height: 500px; max-height: 700px; overflow-y: auto; margin-bottom: 20px">
          <el-divider content-position="left"><span style="color: coral">组件启动</span></el-divider>
          <!--md预览展示-->
          <mavon-editor v-model="obj.start" style="font-size: 14px" :subfield="false" :defaultOpen="'preview'" :editable="false" :toolbarsFlag="false" />
        </div>
      </el-tab-pane>

      <el-tab-pane label="停止" name="stop">
        <div style="min-height: 500px; max-height: 700px; overflow-y: auto; margin-bottom: 20px">
          <el-divider content-position="left"><span style="color: coral">组件停止</span></el-divider>
          <!--md预览展示-->
          <mavon-editor v-model="obj.stop" style="font-size: 14px" :subfield="false" :defaultOpen="'preview'" :editable="false" :toolbarsFlag="false" />
        </div>
      </el-tab-pane>


    </el-tabs>


    <span slot="footer" class="dialog-footer">
            <el-button plain type="primary" @click="drawerConfig.show = false">关闭</el-button>
    </span>

  </el-drawer>

</template>

<script>

import {getFullDate, getFullTime} from "@/utils/utils";
import ComputerServerDetailed from "../site/ComputerServerDetailed.vue";
import OpsComputerFileList from "../site/OpsComputerFileList.vue";

export default {
  name: "ComponentVersionDetailed",
  components: {OpsComputerFileList, ComputerServerDetailed},
  data(){
    return {
      // 默认值，进入页面后的值
      defaultValue: {
        // 弹出框标题
        title: '详情',
      },
      // 抽屉的默认值
      drawerConfig: {
        // 关闭时销毁 Dialog 中的元素
        destroyOnClose: false,
        // 弹出框是否打开
        show: false,
        // 是否显示关闭按钮
        close: true,
        // 下面2个属性解决打开弹出框后没有在最上面显示的问题，导致看到的内容是一半的，需要先将滚动条移到最上面
        // lockScroll: false,
        appendToBody: true,
        // 标题
        title: '详情',
        // Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释
        size: '60%',
      },
      // 列表的尺寸
      size: 'small',
      // tag的大小
      mini: 'mini',
      // tag 的大小
      tagSize: 'small',
      // 展示的数据
      obj: {
        id: null,
        componentId: null,
        version: null,
        type: null,
        reason: null,
        briefIntroduction: null,
        downUrl: null,
        installDoc: null,
        start: null,
        stop: null,
        description: null,
        createTime: null,
        updateTime: null,
        updateId: null,
        createId: null,
        delType: null,
      },
      // 描述列表的css
      CS: {
        // 'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      // 描述列表的css
      LS: {
        // 'color': '#000',
        // 'text-align': 'center',
        'font-weight': '600',
        // 'height': '40px',
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        'min-width': '110px',
        'word-break': 'keep-all'
      },
      // 标签页信息
      elTab:{
        // 被选中的标签
        activeName: 'home',
      },
    }
  },
  methods: {
    /**
     * 标签页被点击的时候
     * @param tab
     * @param event
     */
    handleTabClick(tab, event){
      console.log(this.elTab.activeName)
    },
    /**
     * 打开弹出框
     * @param obj 人员信息
     */
    init(obj){
      this.obj = obj
      this.drawerConfig.show = true
    },
    /**
     * 转换时间戳为时间格式
     */
    getTime(item){
      return getFullTime(item)
    },
    /**
     * 时间转日期
     * @param item 要转换的时间戳
     * @return {string}
     */
    getFullDate(item){
      return getFullDate(item)
    },
  },
}
</script>

<style scoped>

</style>


